<template>
  <div class="spreadList">
    <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch">
      </navSearch>
    <el-row :gutter="30" style="margin-bottom:15px" >
      <el-col :span="4">
        <el-card shadow="never">
          推广人数：{{ 538 }}
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          推广店铺总数：{{ 1968 }}
        </el-card>
      </el-col>
    </el-row>
<el-table
    :data="spreadData"
    style="width: 100%"
    max-height="650">
    <el-table-column
      prop="userId"
      label="用户ID"
      width="240">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="用户昵称"
      width="240">
    </el-table-column>
    <el-table-column
      prop="promoterPhone"
      label="推广人联系电话"
      width="240">
    </el-table-column>
    <el-table-column
      prop="promotionCount"
      label="推广数量"
      width="240">
    </el-table-column>
    <el-table-column
      prop="promotionEarnings"
      label="推广收益">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="270">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">推广详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import { getpromotionList } from '@/api/promotionlist'
export default {
  data () {
    return {
      formList: {
        user: true,
      },
      spreadData: []
    }
  },
  created(){
    this.getpromotionList()
  },
  methods: {
    handleClick (id) {
      this.$router.push({ name: 'spreadDetails' })
    },
    async getpromotionList(){
      this.spreadData = await getpromotionList()
      console.log(this.spreadData,`11`);
    },
    btnSearch() {
      alert(`11`)
    }
  }
}
</script>

<style lang="less" scoped>
.spreadList{
  .hint{
    line-height: 25px;
    span{
      margin-right: 70px ;
      margin-left: 3px;
      float: left;
    }
  }
}
</style>
